<template>
  <div style="display: flex; flex-direction: column; height: 100vh;">
    <!-- 头部区域 -->
    <div style="background-color: #FFD700; padding: 10px;">
      <el-row :gutter="10">
        <el-col :span="20">
          <el-row :gutter="10">
            <el-col :span="4">
              <el-avatar src="boolean.png" style="width: 60px; height: 60px; vertical-align: middle;"></el-avatar>
            </el-col>
            <el-col :span="20">
              <el-menu
                  mode="horizontal"
                  background-color="#FFD700"
                  text-color="#000"
                  active-text-color="#ff0"
                  unique-opened
                  router
                  :collapse="isCollapse"
                  :collapse-transition="false"
                  @select="selectMenu"
              >
                <el-menu-item index="/homepage">
                  <el-icon style="font-size: 21px;"><User/></el-icon>
                  首页
                </el-menu-item>
                <el-menu-item index="/service">
                  <el-icon style="font-size: 21px;"><Van/></el-icon>
                  服务
                </el-menu-item>
                <el-menu-item index="/order">
                  <el-icon style="font-size: 21px;"><Location/></el-icon>
                  订单大厅
                </el-menu-item>
                <el-sub-menu index="4">
                  <template #title>
                    <el-icon style="font-size: 21px;"><Place/></el-icon>
                    百科
                  </template>
                  <el-menu-item index="/popularScience">科普</el-menu-item>
                  <el-menu-item index="/read">阅读</el-menu-item>
                  <el-menu-item index="/law">法律</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="5">
                  <template #title>
                    <el-icon style="font-size: 21px;"><MessageBox/></el-icon>
                    宠圈
                  </template>
                  <el-menu-item index="/petCircleSquare">宠圈广场</el-menu-item>
                  <el-menu-item index="/myPetCircle">我的宠圈</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="6">
                  <template #title>
                    <el-icon style="font-size: 21px;"><Football/></el-icon>
                    我的
                  </template>
                  <el-menu-item index="/myProfile">个人信息</el-menu-item>
                  <el-menu-item index="/myOrder">我的订单</el-menu-item>
                  <el-menu-item index="/myCollection">我的收藏</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="7">
                  <template #title>
                    <el-icon style="font-size: 21px;"><Football/></el-icon>
                    管理
                  </template>
                  <el-menu-item index="/userManage">用户管理</el-menu-item>
                </el-sub-menu>
              </el-menu>
            </el-col>
          </el-row>
        </el-col>



        <el-col :span="4">
          <div style="position: absolute; right: 20px; top: 10px; display: flex; gap: 15px; align-items: center;">
            <!-- 注册和登录按钮 -->
            <a href="/register"  v-if="!user?.username"
               style="font-size: 16px; color: #000;">注册</a>
            <a href="javascript:void(0)"  v-if="!user?.username"
                style="font-size: 16px; color: #000;" @click="showLogin">登录</a>

            <!-- 显示用户名 -->
            <template v-if="user?.username">
              <el-dropdown trigger="click">
                <span style="font-size: 19px; font-weight: bold;">
                  {{ user.username }}
                  <el-icon><ArrowDown /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </div>
        </el-col>



      </el-row>
    </div>
<!--    z-index: 3000 !important;custom-class="custom-dialog"-->
    <!-- 登录对话框 -->
    <el-dialog
        title="用户登录"
        v-model="showLoginDialog"
        width="400px"
    ><!--:model="loginForm" :rules="loginRules" ref="loginFormRef"-->
      <el-form  label-width="80px">
        <el-form-item label="用户名">
          <el-input placeholder="请输入用户名" v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input placeholder="请输入密码" type="password" v-model="loginForm.password"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: right; margin-top: 20px;">
        <el-button @click="showLoginDialog = false">取消</el-button>
        <el-button type="primary" @click="handleLogin">登录</el-button>
      </div>
      <div style="text-align: center; margin-top: 10px;">
        <a href="/register" style="color: #409EFF;">没有账号？点击注册</a>
      </div>
    </el-dialog>




    <!-- 内容区域 -->
    <div style="display: flex; flex-grow: 1;">
      <div :style="{ width: '100%' }">
        <el-header style="padding-top: 22px; height: 10vh; background-color: #FFF;">
          <el-breadcrumb separator="/" style="position: relative; top: 20px;">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="item in breadcrumb" :key="item">{{ item }}</el-breadcrumb-item>
          </el-breadcrumb>
        </el-header>
        <el-main style="height: 90vh; padding: 0; overflow-y: auto;">
          <router-view />
        </el-main>
      </div>
    </div>

    <!-- 页脚区域 -->
    <div style="background-color: #f0f0f0; text-align: center; padding: 10px; font-size: 14px;">
      <el-button type="primary" @click="deleteLocal" >buttonCont</el-button>© 2024 懂宠帮--宠物科普互助服务平台   设计团队--Boolean对不队. All rights reserved.
    </div>


  </div>

</template>

<script setup>
import { ref } from "vue";
import {Expand, Location, MessageBox, Place, User, Van, ArrowDown, Football} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import axios from "axios";
const deleteLocal=()=>{
  localStorage.removeItem('breadCrumb');
  console.log("清楚了浏览器对面包屑导航的缓存");
}
const showLogin=()=>{
  showLoginDialog.value=true;
  console.log("点击了登录");
}
// 定义变量控制左侧菜单栏显示折叠
const isCollapse = ref(false);

// 登录对话框显示状态
const showLoginDialog = ref(false);

// 登录表单
const loginForm = ref({
  username: '',
  password: ''
});

// 登录表单验证规则
const loginRules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
};

const loginFormRef = ref(null);

// 定义方法控制菜单栏折叠情况
const changeCollapsed = () => {
  isCollapse.value = !isCollapse.value;
};

// 调用全局对象window中设置的方法，获取当前登录的用户名
const user = ref(getUser() || { username: '' });

// 定义退出登录的方法
const logout = () => {
  if (confirm('您确定要退出登录吗?')) {
    // 清除存在localStorage中的数据
    localStorage.removeItem('user');
    // 退出时，面包屑的值也需要清空
    localStorage.removeItem('breadCrumb');
    // 退出后跳转至登录页
    //window.location.href = '/login';
    // 也需要把已经取出来的user对象清空
    user.value = { username: '' };
  }
};

// 登录逻辑
const handleLogin = () => {
  /*loginFormRef.value.validate((valid) => {
    if (valid) {
      // 模拟登录逻辑，实际应调用 API 验证登录
      user.value = { username: loginForm.value.username };
      localStorage.setItem('user', JSON.stringify(user.value));
      showLoginDialog.value = false;
      alert('登录成功');
    } else {
      console.error('登录表单验证失败');
    }
  });*/
  console.log(loginForm.value);
  axios.post(BASE_URL+'/v1/user/login',loginForm.value)
      .then((response)=>{
        //2.在回调函数中处理接收到的服务器响应，先发请求，服务器返回响应后才执行此处
        //3.response是响应对象，我们可以从response.data中得到后端的响应数据
        /* response.data是后端响应的JsonResult */
        /* response.data.data 是JsonResult中的响应数据UserVO */
        console.log(response);
        console.log(response.data);
        console.log(response.data.data);
        //根据状态码判断登录是否成功
        if(response.data.code == 200){
          ElMessage.success('登录成功!');
          //console.log(response.data.data);
          //console.log(JSON.stringify(response.data.data));
          //router.push('/');//提示成功消息+跳转至首页
          /* localStorage:维护字符串类型的键值对 */
          //登录成功后,将后端返回的userVO存入localStorage中,取的时候也用user这个名字取出来
          localStorage.setItem('user',JSON.stringify(response.data.data));
          showLoginDialog.value=false;
          window.location.reload();
        }else{
          ElMessage.error(response.data.msg);
          loginForm.value = {username:'',password:''};//提示错误消息+清空表单数据
        }
      });
};
// 定义数组用来保存面包屑导航显示的值
 const breadcrumb = ref(JSON.parse(localStorage.getItem('breadCrumb')) || ['首页']);

// 定义对象来维护菜单index路由与面包屑导航值的对应关系
let map = {
  '/homepage': ['首页'],
  '/service': ['服务'],
  '/order': ['订单'],
  '/popularScience': ['宠物百科', '科普'],
  '/law': ['宠物百科', '法律'],
  '/read': ['宠物百科', '阅读'],
  '/petCircleSquare': ['宠圈', '宠圈广场'],
  '/myPetCircle': ['宠圈', '我的宠圈'],
  '/myProfile': ['我的','个人信息'],
  '/myOrder': ['我的','我的订单'],
  '/myCollection': ['我的','我的收藏'],
  '/userManage':['管理','用户管理']
};

// 定义选择菜单项触发的方法
const selectMenu = (index) => {
  // 根据当前被选择的菜单项的index值，
  // 从map对象中取出此index对应的面包屑导航值并赋值给breadcrumb
  breadcrumb.value = map[index];
  // 解决刷新页面面包屑值丢失的问题：存入localStorage中
  localStorage.setItem('breadCrumb', JSON.stringify(breadcrumb.value));
};

</script>
